import ProCard from '@ant-design/pro-card';
import { CrownFilled, TabletFilled } from '@ant-design/icons';
import { useRef } from 'react';
import { Input, Button, Space } from 'antd';
import type { ProSettings } from '@ant-design/pro-layout';
import {
  PageContainer,
  ProLayout,
  SettingDrawer,
} from '@ant-design/pro-layout';
import { useState } from 'react';
import defaultProps from './_defaultProps';

export default () => {
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    fixSiderbar: true,
    layout: 'mix',
    splitMenus: true,
  });
  const [pathname, setPathname] = useState('/admin/sub-page1');
  const [menuName, setMenuName] = useState<string | undefined>('');
  const [parentKeys, setParentKeys] = useState<string[] | undefined>();
  const [routes, setRoutes] = useState([
    {
      path: '/admin',
      name: '管理页',
      icon: <CrownFilled />,
      access: 'canAdmin',
      component: './Admin',
      routes: [
        {
          path: '/admin/sub-page1',
          name: '菜单1',
          icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
          component: './Welcome',
          collapsed: true,
          routes: [
            {
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
              path: '/admin/sub-page1/1',
              name: '子菜单1-1',
            },
            {
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
              path: '/admin/sub-page1/2',
              name: '子菜单1-2',
            },
          ],
        },
        {
          path: '/admin/sub-page2',
          name: '菜单2',
          icon: <CrownFilled />,
          collapsed: true,
          component: './Welcome',
          routes: [
            {
              icon: <CrownFilled />,
              path: '/admin/sub-page2/1',
              name: '子菜单2-1',
              component: './Welcome',
            },
            {
              icon: <CrownFilled />,
              path: '/admin/sub-page2/2',
              name: '子菜单2-2',
              component: './Welcome',
            },
          ],
        },
      ],
    },
  ]);
  const [curKey, setCurKey] = useState<string | undefined>();
  const ref = useRef();

  // 保存菜单数据
  const saveMenuData = () => {
    const newData = [...routes];
    newData.forEach((d) => {
      if (parentKeys && d.path === parentKeys[0]) {
        d.routes?.forEach((c) => {
          if (parentKeys[1] === c.path) {
            c.routes?.forEach((sub) => {
              if (sub.path === curKey) {
                sub.name = menuName || '';
              }
            });
          }
        });
      }
    });
    setRoutes(newData);
  };

  return (
    <div
      id="test-pro-layout"
      style={{
        height: '100vh',
      }}
    >
      <ProLayout
        actionRef={ref}
        route={{
          path: '/',
          routes,
        }}
        menu={{
          hideMenuWhenCollapsed: true,
          ignoreFlatMenu: true,
        }}
        location={{
          pathname,
        }}
        menuDataRender={(data) => {
          const newData = [...data];
          newData.forEach((d) => {
            if (parentKeys && d.key === parentKeys[0]) {
              d.children?.forEach((c) => {
                if (parentKeys[1] === c.key) {
                  c.children?.forEach((sub) => {
                    if (sub.key === curKey) {
                      sub.name = menuName;
                    }
                  });
                }
              });
            }
          });
          return newData;
        }}
        avatarProps={{
          src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
          size: 'small',
          title: <div>管理员</div>,
        }}
        actionsRender={(props) => {
          if (props.isMobile) return [];
          return [
            props.layout !== 'side' && document.body.clientWidth > 1400 ? (
              <div
                key="SearchOutlined"
                aria-hidden
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  marginInlineEnd: 24,
                }}
                onMouseDown={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
              ></div>
            ) : undefined,
          ];
        }}
        menuFooterRender={(props) => {
          if (props?.collapsed) return undefined;
          return (
            <div
              style={{
                textAlign: 'center',
                paddingBlockStart: 12,
              }}
            >
              <div>© 2021 Made with love</div>
              <div>by Ant Design</div>
            </div>
          );
        }}
        menuItemRender={(item, dom) => (
          <a
            onClick={() => {
              setPathname(item.path || '/welcome');
              setCurKey(item.key);
              setParentKeys(item.pro_layout_parentKeys);
              setMenuName(item.name);
            }}
          >
            {dom}
          </a>
        )}
        {...settings}
      >
        <PageContainer
          breadcrumb={{
            routes: [],
          }}
          onBack={() => window.history.back()}
        >
          <ProCard
            style={{
              height: '200vh',
              minHeight: 800,
            }}
          >
            <Space>
              <Input
                value={menuName}
                onChange={(e) => setMenuName(e.target.value)}
              />
              <Button type="primary" onClick={saveMenuData}>
                保存
              </Button>
            </Space>
          </ProCard>
        </PageContainer>
      </ProLayout>
      <SettingDrawer
        pathname={pathname}
        enableDarkTheme
        getContainer={() => document.getElementById('test-pro-layout')}
        settings={settings}
        onSettingChange={(changeSetting) => {
          setSetting(changeSetting);
        }}
        disableUrlParams={false}
      />
    </div>
  );
};
